<template>
    <div>
        <h2>篮球组件</h2>
        <ul>
            <router-link :to="{ name: 'mynba' }" custom v-slot="{ isActive, href, navigate }">
                <li @click="navigate">
                    Nba频道
                </li>
            </router-link>

            <router-link to="/basketball/cba" custom v-slot="{ isActive, href, navigate }">
                <li @click="navigate">
                    cba频道
                </li>
            </router-link>
        </ul>

        <!-- 展示二级路由组件的内容 -->
        <router-view></router-view>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
// 获取当前路由信息（路由路径、参数、meta）
const route = useRoute()
// // 获取当前路由的请求路径
// console.log('route=>', route)
// console.log('route=>', route.fullPath) // 获取当前路由完整路径信息（含参数）
// console.log('route=>', route.path) // 获取当前路由完整路径信息（不含参数）
// console.log('route=>', route.matched) // 获取当前路由及其祖先路径组成的路径数组，应用场景：可以实现面包屑导航
// console.log('route=>', route.query) // 获取当前路由的查询字符串参数
// console.log('route=>', route.params) // 获取当前路由路由参数
// console.log('篮球')
</script>

<style lang="scss" scoped>
li {
    color: blue;

    &:hover {
        cursor: pointer;
    }
}
</style>